@import "../../_common/style/mixins/var";
@mixin vmui-switch {
  .vmui-switch {
    display: inline-block;
    .vmui-switch-inner-wrap {
      display: flex;
      justify-content: flex-start;
      .vmui-switch-input {
        display: none;
      }
      .vmui-switch-core {
        display: inline-block;
        position: relative;
        width: pxRem(52);
        height: pxRem(32);
        border: pxRem(1) solid #d9d9d9;
        border-radius: pxRem(16);
        box-sizing: border-box;
        background: #d9d9d9;
        &:before {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          transition: transform .3s,-webkit-transform .3s;
          border-radius: pxRem(15);
          width: pxRem(50);
          height: pxRem(30);
          background-color: #fdfdfd;
        }
        &:after {
          width: pxRem(30);
          height: pxRem(30);
          background-color: #fff;
          box-shadow: 0 pxRem(1) pxRem(3) rgba(0,0,0,.4);
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          border-radius: pxRem(15);
          transition: transform .3s ease, -webkit-transform .3s ease;
        }
        &.checked {
          border-color: #26a2ff;
          background-color: #26a2ff;
          &:before {
            transform: scale(0);
          }
          &:after {
            transform: translateX(pxRem(20));
          }
        }
        &.disabled {
          opacity: 0.55;
        }
      }
      .vmui-switch-label {
        display: inline-block;
        margin-left: pxRem(8);
        line-height: pxRem(32);
        &:empty {
          margin-left: 0;
        }
      }
    }
  }
}
